Como os PWAs, o WebAssembly e o ChromeOS estão ajudando um editor de vídeo baseado na Web a oferecer melhor desempenho e uma experiência mais envolvente para 12 milhões de usuários.
97%
Crescimento mensal nas instalações de PWA
2,3x
Melhoria do desempenho
9%
Maior retenção de usuários de PWA
O Clipchamp é o editor de vídeos on-line no navegador que permite que qualquer pessoa conte histórias que valem a pena compartilhar em vídeo. No mundo todo, mais de 12 milhões de criadores usam o Clipchamp para editar vídeos com facilidade. Oferecemos soluções simples para criar vídeos, de ferramentas intuitivas, como corte e redução, a recursos práticos, como o gravador de tela, e até um criador de memes.
Quem usa o Clipchamp?
Nossos usuários (ou editores do dia a dia, como chamamos) são diversos. Não é necessário ter experiência para ser um editor de vídeo com o Clipchamp. Especificamente, estamos notando que as equipes de vendas, treinamento de suporte e marketing de produtos usam nossa webcam e gravador de tela para criar conteúdo explicativo rápido com texto e GIFs adicionados para torná-lo mais envolvente. Também observamos que muitas pequenas empresas editam e postam vídeos sociais em trânsito.
Quais desafios eles enfrentam?
Sabemos que a edição de vídeo pode ser assustadora no início. A suposição é que é difícil, provavelmente devido a experiências frustrantes anteriores com softwares de edição complexos. Por outro lado, o Clipchamp se concentra na facilidade e simplicidade, oferecendo suporte com sobreposições de texto, vídeos e músicas, modelos e muito mais.
A maioria dos editores comuns não quer criar obras-primas de cinema. Conversamos muito com nossos usuários e sempre lembramos que eles estão ocupados e só querem contar a história para o mundo da maneira mais rápida e fácil possível. Esse é o nosso foco.
Como desenvolver um PWA do Clipchamp
No Clipchamp, nosso objetivo é ajudar as pessoas a contar suas histórias em vídeo. Para cumprir essa visão, logo percebemos que permitir que os usuários usassem as próprias filmagens ao criar um projeto de vídeo era importante.
Esse insight pressionou a equipe de engenharia do Clipchamp a criar uma tecnologia que processasse arquivos de mídia em escala de gigabyte de forma eficiente em um aplicativo da Web. Tendo em mente as restrições de largura de banda da rede, descartamos uma solução tradicional baseada na nuvem. Fazer upload de arquivos de mídia grandes de uma conexão de Internet de varejo invariavelmente causaria tempos de espera enormes antes mesmo que a edição pudesse começar, resultando em uma experiência do usuário ruim.
Isso nos fez mudar para uma solução totalmente no navegador, em que todo o processamento de vídeo é feito localmente usando recursos de hardware disponíveis no dispositivo do usuário final. Apostamos estrategicamente no navegador Chrome e, por extensão, na plataforma ChromeOS para nos ajudar a superar os desafios inevitáveis de criar uma plataforma de criação de vídeos no navegador.
O processamento de vídeo consome muitos recursos, afetando os recursos de computador e armazenamento. Começamos a criar a primeira versão do Clipchamp em cima do cliente nativo (PNaCl) do Google. Embora tenha sido descontinuado, o PNaCl foi uma ótima confirmação para nossa equipe de que os apps da Web podem ser rápidos e de baixa latência, ainda que sejam executados no hardware do usuário final.
Quando mudamos para o WebAssembly, ficamos felizes em ver o Chrome liderando a incorporação de recursos pós-MVP, como operações de memória em massa, linhas de execução e, mais recentemente, operações de vetor de largura fixa. O último foi muito esperado pela nossa equipe de engenharia, oferecendo a capacidade de otimizar nossa pilha de processamento de vídeo para aproveitar as operações SIMD, prevalentes em CPUs contemporâneas. Aproveitando o suporte do WebAssembly SIMD do Chrome, conseguimos acelerar algumas cargas de trabalho particularmente exigentes, como a decodificação e a codificação de vídeo 4K.
Com pouca experiência anterior e em menos de um mês de esforço de um dos nossos engenheiros, conseguimos melhorar a performance em 2,3 vezes. Embora ainda limitado a um teste de origem do Chrome, já conseguimos lançar essas melhorias de SIMD para a maioria dos nossos usuários. Embora nossos usuários executem configurações de hardware muito diferentes, confirmamos um aumento de desempenho correspondente na produção sem efeitos prejudiciais nas taxas de falha.
Recentemente, integramos a API WebCodecs, que está disponível em outro teste de origem do Chrome. Com esse novo recurso, vamos melhorar ainda mais o desempenho da decodificação de vídeo em hardware de baixa especificação, como encontrado em muitos Chromebooks populares.
Com uma PWA criada, é importante incentivar a adoção dela. Assim como muitos apps da Web, nos concentramos na facilidade de acesso, o que inclui recursos como logins sociais, incluindo o Google, para levar o usuário rapidamente a um local em que ele possa editar o vídeo e exportá-lo com facilidade. Além disso, promovemos nossas solicitações de instalação de PWA na barra de ferramentas e como um aviso pop-up na navegação do menu.
Resultados
Nosso PWA instalável do Chrome está indo muito bem. Ficamos muito felizes em ver uma retenção 9% maior com os usuários de PWA do que com os usuários padrão de computador. A instalação da PWA foi enorme, aumentando a uma taxa de 97% ao mês desde o lançamento, há cinco meses. E, como mencionado anteriormente, as melhorias do SIMD da WebAssembly melhoraram a performance em 2,3 vezes.
Futuro
Ficamos surpresos com o engajamento e a adoção da nossa PWA. Acreditamos que a retenção de usuários do Clipchamp foi beneficiada porque a PWA é instalada e mais fácil de acessar. Também notamos que a PWA tem um desempenho melhor para o editor, o que a torna mais atraente e faz com que as pessoas voltem.
No futuro, queremos que o ChromeOS ofereça ainda mais oportunidades para os usuários fazerem mais com menos esforço. Especificamente, estamos animados com algumas das integrações convenientes com o SO local ao trabalhar com arquivos. Acreditamos que isso vai ajudar a acelerar os fluxos de trabalho dos nossos editores, e essa é uma das nossas maiores prioridades.